

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
<style type="text/css">
.preview-size {
	width: 113px;
	height: 85px;
	margin: 0 10px 10px 0;
}
</style>
</head>
<body>
	<form id="form-botton">
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body" pad15>

							<div class="layui-form" lay-filter="">
								<div class="layui-form-item">
									<label class="layui-form-label">商品种类:</label>
									<div class="layui-input-block">
										<select name="cid" lay-filter="cid">
											<option value="">请选择种类</option>
											<option th:each="cat : ${cats}" th:value="${cat.cid}"
												th:text="${cat.name}"></option>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品名称:</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="required"
											lay-verType="tips" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品简介:</label>
									<div class="layui-input-block">
										<input type="text" name="sellPoint" lay-verType="tips"
											autocomplete="off" id="LAY_password" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品价格:</label>
									<div class="layui-input-block">
										<input type="text" name="price" lay-verType="tips"
											autocomplete="off" id="LAY_password" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品库存:</label>
									<div class="layui-input-block">
										<input type="text" name="stock" lay-verType="tips"
											autocomplete="off" id="LAY_password" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">封面图片</label>
									<div class="layui-input-block">
										<input type="hidden" name="cover" autocomplete="off"
											class="layui-input" id="cover">
										<button type="button" class="layui-btn" id="test1">
											<i class="layui-icon">&#xe67c;</i>上传图片
										</button>
										<div class="layui-upload-list" id="preview1"></div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">商品图片:</label>
										<div class="layui-input-block" id="imgs">
											<button type="button" class="layui-btn" id="test2">
												<i class="layui-icon">&#xe67c;</i>上传图片
											</button>
											<div id="preview2" class="layui-upload-list"></div>
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">是否上架:</label>
										<div class="layui-input-inline">
											<input type="checkbox" name="onSale" lay-verType="tips"
												autocomplete="off" id="LAY_password" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">商品详情:</label>
										<div class="layui-input-block">
											<textarea id="description" name="description"
												></textarea>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="save"
												id="save">保存</button>
											<button type="reset" style="display: none;">重置</button>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
	</form>
	<script src="/layuiadmin/layui/layui.js"></script>
	<script>
		layui
				.config({
					base : '/layuiadmin/' //静态资源所在路径
				})
				.extend({
					index : 'lib/index' //主入口模块
				})
				.use(
						[ 'index', 'set', 'form', 'layedit', 'upload' ],
						function() {
							var form = layui.form, $ = layui.$;
							var layedit = layui.layedit;
							var upload = layui.upload;
							var newindex = layedit.build('description')
							var upload1 = upload
									.render({
										elem : '#test1' //绑定元素
										,
										url : '/product/cover' //上传接口
										,
										before : function(obj) {
											//预读本地文件示例，不支持ie8
											obj
													.preview(function(index,
															file, result) {
														$('#preview1')
																.append(
																		'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img preview-size">'); //图片链接（base64）
													});
										},
										done : function(res) {
											//上传完毕回调
											$("#cover").empty().val(res.data.src);
										},
										error : function() {
											//请求异常回调
										}
									});
							var upload2 = upload
									.render({
										elem : '#test2',
										multiple : true,
										url : '/product/cover',
										before : function(obj) {
											//预读本地文件示例，不支持ie8
											obj
													.preview(function(index,
															file, result) {
														$('div#preview2')
																.append(
																		'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img preview-size">');
													});
										},
										done : function(res) {
											var newimgs = $('<input type="hidden" name="imgs"/>').val(res.data.src)
											$("#imgs").append(newimgs);
										},
										error : function() {
										}
									});

								form.on('submit(save)', function(data) {
									layedit.sync(newindex);
									$.ajax({
										url : "/product/save",
										type : "post",
										data : $('form').serialize(),
										dataType : "json",
										success : function(res) {
											if (res.code == 0) {
												layer.msg('添加商品成功');
												$('#form-botton')[0].reset();
											}
										}
									})
									return false;

								});
						});
	</script>
</body>
</html>